<template>
  <div class="w-h-100 root-box">
    <div class="login-div">
      <div style="display: flex;flex-direction: row;">
        <el-avatar :src="iconSy" :size="60"></el-avatar>
        <span class="span-style">智慧校园管理系统</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="user">
          <el-input placeholder="请输入手机号或者学号" clearable
                    v-model="ruleForm.user">
            <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input type="password" clearable show-password
                    placeholder="请输入密码"
                    v-model="ruleForm.pwd">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" class="login-button" type="primary" @click="login('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import iconDou from "@/assets/xtuIcon.png"

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      iconSy: iconDou,
      ruleForm: {
        user: 'admin',
        pwd: 'admin'
      },
      rules: {
        user: [
          {required: true, message: '请输入手机号或学号!', trigger: 'blur'},
          {required: true, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        pwd: [
          {required: true, message: '请选输入密码！'}
        ]
      },
      aeee: '',
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.user === "admin" && this.ruleForm.pwd === "admin") {
            //在浏览器的会话存储中存储登录状态（每次登录成功就会存储）
            window.localStorage.setItem("loginStatus","success")
            this.$message({
              showClose: true,
              message: '恭喜你，登录成功！',
              type: 'success'
            });
            this.$router.push({name: "home"})
          } else {
            this.$message({
              showClose: true,
              message: '登录失败，账号或者密码错误！',
              type: 'error'
            });

          }
        } else {
          return false;
        }
      });
    },
  },//挂在完成时候的钩子函数，指定到指定的二级路由
  mounted() {
    this.$router.push({path:"/home/index"})
    console.log("首页挂载完成。。。")
    //创建回调函数，用于子组件传参给父组件
    // this.$refs.leftNav=VueComponent
    // const  vm=this.$refs.leftNav=VueComponent
    // const  vm=this.$refs.leftNav
    this.$refs.leftNav.$on("tagClick", (menuObj) => {
      this.tagValue = menuObj
      console.log("父组件接受到了左侧导航栏子组件的参数：", menuObj)
    })
    //$on绑定事件(事件名，回调函数实参)
    //$refs--对象--属性为：标记为ref的组件，都会到这里来
    this.$refs.topNav.$on("topOfParent", (obj) => {
      //用变量存储起来
      this.topOfLeaf=obj
      console.log("父组件接收到了TopNav传来的参数tag即obj",obj)
    })

    //1、在父组件通过ref标记需要绑定事件的子组件
    //全局事件总线集中绑定

  },
  beforeDestroy() {
    //全局事件总线集中绑定
    this.$bus.$off("test")
  }
}
</script>

<style scoped>
.back-img {
  display: flex;
  background-color: rgba(0, 0, 0, 1);
  width: 100%;
  filter: brightness(50%);
}

.login-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-button {
  width: 320px;
}

.font-color {
  color: white;
}

.span-style {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin: 25px 10px;
}

.root-box {
  display: flex;
  margin: 0;
  background-image: url('../assets/img.png');
  background-size: 100% 100%;
  background-attachment: fixed;
  justify-content: center;
  align-items: center;
}
</style>